<link href="/assets/home/css/WeUI/weui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/assets/home/css/raty/jquery.raty.css">
<script src="/assets/home/js/jquery.raty.js"></script>
<style>
    body {
        font-family: 'Microsoft YaHei';
    }

    p {
        font-size: 4.5vw;
    }

    .item {
        display: flex;
        padding: 2%;
    }
</style>

<body>
    <!-- 导航栏 -->
    <header class="mui-bar mui-bar-nav" style="position: sticky;">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: gray;"
            href="{:url('/home/business/order/index')}"></a>
        <h1 class="mui-title">提交评论</h1>
    </header>

    <!-- 课程封面 -->
    <img src="{$order.subject.thumbs_text}" style="width:100%;">

    <div class="weui-cells__title">{$order.subject.title}</div>

    <form method="post">
        <!-- 输入框 -->
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    {if condition="$order.comment"}
                    <textarea disabled name="comment" class="weui-textarea" placeholder="请输入内容" rows="3"
                        required>{$order.comment}</textarea>
                    {else /}
                    <textarea name="comment" class="weui-textarea" placeholder="请输入内容" rows="3" required></textarea>
                    {/if}
                    <div class="weui-textarea-counter"><span>0</span>/200</div>
                </div>
            </div>
        </div>

        <!-- 评分 -->
        <div class="item">
            <div class="title" style="text-align: left;">
                评分：
            </div>
            <div id="rate" name="rate" class="target"></div>
            <!-- 隐藏域 看不见的表单元素 -->
            <input type="hidden" name="ids" value="5" />
        </div>

        <!-- 提交按钮 -->
        {if condition="$order.comment"}
            <div class="weui-btn-area">
                <button id="prev" type="button" class="weui-btn weui-btn_primary">返回</button>
            </div>
        {else /}
            <div class="weui-btn-area">
                <button type="submit" class="weui-btn weui-btn_primary">立即提交</button>
            </div>
        {/if}
    </form>
    {include file="common/footer" /}
</body>
<script>
    $(function () {
        $('#rate').raty({
            number: 5,
            score: '{$order.rate}',
            targetType: 'number',
            path: `/assets/home/images/`,
            cancelHint: 'cancel-off.png',
            cancelOff: 'cancel-off.png',
            cancelOn: 'cancel-on.png',
            size: 24,
            starOff: 'star-off.png',
            starOn: 'star-on.png',
            cancel: true,
            targetKeep: true,
            precision: false,
            cancel: true, // 取消评分
            readOnly: function (condition='{$order.comment}')
            {
                 // 如果已评论就开启只读模式
                if(condition='{$order.comment}')
                {
                    return true
                }else
                {
                    return false
                }
            },
            click: function (score, evt) {
                $("input[name=ids]").val(score)
            }
        });
    });

    // 返回
    $('#prev').click(function(){
        location.href = `/home/business/order/index`
    })
</script>